{% include 'QLGL/QLGL_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">故障统计</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'QLGL/BHTJ/QLGL_BHTJ_SIDEBAR.html' %}

        <div class="am-u-sm-10" style="position: absolute;width:auto;right:0;left: 200px;height: auto;overflow-y: scroll;bottom: 100px;top: 0px;">
          <div class="am-form-group" >
            <div class="am-alert am-alert-danger" id="my-alert" style="display: none">
              <p>开始日期应小于结束日期！</p>
            </div>
            <div class="am-g" style="margin:0 15px;">
              <div class="am-u-sm-6">
                <button type="button" class="am-btn am-btn-default am-margin-right" id="start_time">开始日期</button><span id="my-startDate">2017-09-13</span>
              </div>
              <div class="am-u-sm-6">
                <button type="button" class="am-btn am-btn-default am-margin-right" id="end_time">结束日期</button><span id="my-endDate"></span>
              </div>
            </div>

          </div>

          <div class="am-form-group" >
            <div class="am-g am-margin-top am-form-group">
              
              <div class="am-u-sm-7 am-u-md-6 am-u-end" >

                <div style="float: left;padding-left: 30px;">桥梁名称：</div>
                <div style="float: left;"">
                  <select id="bridge_name"  style="width: 200px;" data-am-selected="{searchBox: 1}">
                  {% for i in bridgeinfo %}
                  <option value="{{ i.bridge_id }}">{{ i.bridge_name }}</option>
                  {% endfor %}
                  
                  </select>
                </div>
                
                <div style="float: left;padding-left: 10px;">
                  <label class="am-checkbox">
                    <input type="checkbox" value="1" id="display_all" data-am-ucheck> 查看所有
                  </label>
                </div>
              </div>

              <div class="am-u-sm-5 am-u-md-5">
                <button  type="button" class="am-btn am-btn-primary btn-loading-example" onclick="see()">搜索</button>
              </div>
                      
            </div>

          </div>

          <div class="am-u-sm-12 am-u-md-12 " id="see">
            <!-- <ul class="am-tree" role="tree" id="myTreeSelectableFolder"> -->
            <ul class="am-tree" role="tree" id="myTreeSelectableFolder">
              <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                <div class="am-tree-branch-header">
                  <button class="am-tree-branch-name">
                    <span class="am-tree-icon am-tree-icon-folder"></span>
                    <span class="am-tree-label"></span>
                  </button>
                </div>
                <ul class="am-tree-branch-children" role="group"></ul>
                <div class="am-tree-loader" role="alert">Loading...</div>
              </li>
              <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
                <button class="am-tree-item-name">
                  <span class="am-tree-icon am-tree-icon-item"></span>
                  <span class="am-tree-label"></span>
                </button>
              </li>
            </ul>  


          </div>

         

        </div>
      </div>
    </div>
  </div>
</div>
{% include 'footer.html' %}

<script src="/static/assets/js/jquery.min.js"></script>

<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js/layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<script src="/static/assets/highcharts/highcharts.src.js"></script>
<!-- <script src="/static/assets/highcharts/highstock.src.js"></script> -->
<!-- <script src="/static/assets/highcharts/lichart.js"></script> -->
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
 <link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.datatables.css"/>
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
  .tr_select{
    background-color: #dbdcf4!important; 
  }
  .tr_tr{

  }
</style>
<script type="text/javascript">
  $.ajaxSetup({
  data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
  });
  $("#collapse-nav1").addClass("am-in");
  $("#qlgl").removeClass("am-collapsed");
  $("#qlgl").css("color", "#3399CC");
  $("#qlglObhtj").css("color", "#3399CC");
  $("#bhtjOgjbhsl").removeClass("li_a");

$(document).ready(function(){
  var date = new Date();
    var seperator1 = "-";
    var month1 = date.getMonth() + 1;
    var month2 = date.getMonth();
    var strDate = date.getDate();
    if (month1 >= 1 && month1 <= 9) {
        month1 = "0" + month1;
    }
    if (month2 >= 1 && month2 <= 9) {
        month2 = "0" + month2;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate1 = date.getFullYear() + seperator1 + month1 + seperator1 + strDate
    var currentdate2 = date.getFullYear() + seperator1 + month2 + seperator1 + strDate
   
  $("#end_time").attr('value',currentdate1);
  $("#my-endDate").html(currentdate1);
  $("#start_time").attr('value',currentdate2);  
  $("#my-startDate").html(currentdate2); 
})

  function see() {
    var start_time = $("#my-startDate").html();
    var end_time = $("#my-endDate").html();
    var bridge_name = $("#bridge_name option:selected").val();
    var display_all = 0;
    if($('#display_all').is(':checked')){
      display_all=1
    }else{
      display_all=0
    }
    if(bridge_name != undefined){
      select(start_time,end_time,bridge_name,display_all);
      // $("#see").css("display","block");
    }else{
      AlertMSG("请选择检查类型！")
    }

  }
  












  function select(start_time,end_time,bridge_name,display_all){
    $.ajax({
          "url": "/BHTJ_GJBH_TREE_DATA/",
          "data":{"bridge_id":bridge_name,"f_date":start_time,"t_date":end_time,"display_all":display_all},
          "datatype": "json",
          "type": "post",
          "async": "false"
        }).success(function(data) {
          // console.log(data)
          if(data.status == 1){
            // console.log(data.data);

            read_bridge(data.data);
          }else{
            AlertMSG(data.message);
          }
          
          
        }).error(function(data) {
          AlertMSG("读信息失败！");
          return []
        });
  }




var aaa=1



function read_bridge(information) {
  aaa=aaa+1;

    // $('#myTreeSelectableFolder').tree('destroy');
    var data = [];
    var bridge_1 = {}
    for(var i = 0; i < information.length; i++) {

      var bridge_2 = []
      for(var j = 0; j < information[i].parts_sub.length; j++) {



        var bridge_4 = []
        // console.log(information[i].parts_sub[j]);
        // console.log(information[i].parts_sub[j].member.length);


        for(var k = 0; k < information[i].parts_sub[j].member.length; k++) {
          var bridge_5 = {
            title: information[i].parts_sub[j].member[k].member_name + '（' + information[i].parts_sub[j].member[k].disease_count + '）',
            type: 'item',
            attr: {
              id: information[i].parts_sub[j].member[k].member_id,
            }
          }
          bridge_4.push(bridge_5)
        }

        var bridge_3 = {
          title: information[i].parts_sub[j].parts_sub_name + '（' + information[i].parts_sub[j].disease_count + '）',
          type: 'folder',
          attr: {
            id: information[i].parts_sub[j].parts_sub_id,
          },
          products: bridge_4
          }
        bridge_2.push(bridge_3)
      }

      var bridge_1 = {
        title: information[i].parts_name + '（' + information[i].disease_count + '）',
        type: 'folder',
        attr: {
          id: information[i].parts_code
        },
        products: bridge_2
      }
      data.push(bridge_1)
    }
    if(aaa > 2){
      $('#myTreeSelectableFolder').tree('destroy');

      $('#see').append('<ul class="am-tree" role="tree" id="myTreeSelectableFolder"><li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false"><div class="am-tree-branch-header"><button class="am-tree-branch-name"><span class="am-tree-icon am-tree-icon-folder"></span><span class="am-tree-label"></span></button></div><ul class="am-tree-branch-children" role="group"></ul><div class="am-tree-loader" role="alert">Loading...</div></li><li class="am-tree-item am-hide" data-template="treeitem" role="treeitem"><button class="am-tree-item-name"><span class="am-tree-icon am-tree-icon-item"></span><span class="am-tree-label"></span></button></li></ul>')
    }

    var tree = $('#myTreeSelectableFolder');

    
    tree.tree({
      dataSource: function(options, callback) {
        // 模拟异步加载
        setTimeout(function() {
          callback({
            data: options.products || data
          });
        }, 100);
      },
      multiSelect: false,
      cacheItems: true,
      folderSelect: false,
      folderIcon:'folder-o',
      folderOpenIcon:'folder-open-o',
      itemIcon:'file-o',
      itemSelectedIcon:'file',
    });
    // tree.on('selected.tree.amui', function(event, data) {
    //   // do something with data: { selected: [array], target: [object] }
    //   //alert(data.selected[0].attr.id);
    //   check_bridge(data.selected[0].attr.id)
    // });

  }

 $(function() {
    var startDate = parserDate($("#my-startDate").html());
    var endDate = parserDate($("#my-endDate").html());
    var $alert = $('#my-alert');
    $('#start_time').datepicker().
      on('changeDate.datepicker.amui', function(event) {

        if (event.date.valueOf() > endDate.valueOf()) {
          $alert.find('p').text('开始日期应小于结束日期！').end().show();
        } else {
          $alert.hide();
          startDate = new Date(event.date);
          $('#my-startDate').text($('#start_time').data('date'));
        }
        $(this).datepicker('close');
      });

    $('#end_time').datepicker().
      on('changeDate.datepicker.amui', function(event) {
        if (event.date.valueOf() < startDate.valueOf()) {
          $alert.find('p').text('结束日期应大于开始日期！').end().show();
        } else {
          $alert.hide();
          endDate = new Date(event.date);
          $('#my-endDate').text($('#end_time').data('date'));
        }
        $(this).datepicker('close');
      });
  });


 var parserDate = function (date) {  
    var t = Date.parse(date);  
    if (!isNaN(t)) {  
        return new Date(Date.parse(date.replace(/-/g, "/")));  
    } else {  
        return new Date();  
    }  
};  

      var AlertMSG = function(msg) {
        AMUI.dialog.alert({
          title: '错误提示',
          content: msg,
          onConfirm: function() {
            console.log('close');
          }
        });
      }
</script>

</body>

</html>